<template>
    <div
        v-if="flagRef"
        class="pop-message-container"
        ref="rootDomRef"
        :class="messageClass"
    >
        <Icon :type="props.aMessageType"></Icon>
        <span class="content">{{ props.aContent }}</span>
    </div>
</template>
<script setup lang="ts">
import Icon from "~@/components/Icon/index.vue";
import { PopMessageEnum } from "../Icon/types";
import { PropType, computed, nextTick, onMounted, onUnmounted, ref } from "vue";

//#region defineXxx
defineOptions({
    name: "PopMessage",
});

const props = defineProps({
    aMessageType: {
        type: String as PropType<PopMessageEnum>,
        required: true,
    },
    aContent: {
        type: String,
        required: true,
    },
});
const emit = defineEmits<{
    destory: [];
    event2: [para1: number, para2: string];
}>();

const rootDomRef = ref<HTMLDivElement>();
const flagRef = ref(true);

const messageClass = computed(() => {
    switch (props.aMessageType) {
        case PopMessageEnum.INFO:
            return "info";

        case PopMessageEnum.SUCCESS:
            return "success";

        case PopMessageEnum.WARN:
            return "warn";

        case PopMessageEnum.ERROR:
            return "error";

        default:
            return "info";
    }
});

onMounted(() => {
    console.log("style", rootDomRef.value?.style);
    nextTick(() => {
        rootDomRef.value?.clientHeight;
        rootDomRef.value!.style.opacity = "100%";
        rootDomRef.value!.style.transform = "translate(-50%, -50%)";
    });

    // 等一段时间，消失
    setTimeout(() => {
        rootDomRef.value!.style.opacity = "0";
        rootDomRef.value!.style.transform = `translate(-50%, -50%) translateY(-25px)`;
        rootDomRef.value!.addEventListener(
            "transitionend",
            function () {
                // flagRef.value = false;
                // 运行回调函数
                // options.callback && options.callback();
				emit('destory');
            },
            { once: true }
        );
    }, 3000);
});

onUnmounted(()=>{
    console.log('in message unMounted');
    
})
</script>
<style lang="less" scoped>
.pop-message-container {
    .self-center();
    z-index: 999;
    border-radius: 5px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.5);
    padding: 10px 30px;
    line-height: 2;
    display: flex;
    align-items: center;
    color: #fff;
    transition: 2s;
    transform: translate(-50%, -50%) translateY(25px);
    opacity: 0;
    white-space: nowrap;
    & > .content {
        margin-left: 10px;
    }
}
.info {
    background: @primary;
}
.success {
    background: @success;
}
.warn {
    background: @warn;
}
.error {
    background: @danger;
}
</style>
